<template>
    <div class="recommend">
        <div class="header">
            <div class="title">
                <span class="iconfont left">&#xe636;</span>
                <span>去哪儿推荐</span>
            </div>
        </div>
        <div
        class="item border-bottom"
        v-for="(item, index) of list"
        :key="index"
        @click="handleBookClick(index)"
        >
            <div class="item-left">
                <div class="item-title" ref="title">{{item.title}}</div>
                <div class="item-return">条件退</div>
            </div>
            <div class="item-right">
                <div class="item-price" id="price">
                    <span class="before">￥</span>
                    <em class="price" ref="price">{{item.price}}</em>
                </div>
                <div
                class="item-book"
                >预订</div>
            </div>
        </div>
        <fade-transform>
            <common-book
            :price="price"
            :title="title"
            v-show="showBook"
            @close="handleCloseBook"
            ></common-book>
        </fade-transform>
    </div>
</template>

<script>
import CommonBook from 'common/book/book'
import FadeTransform from 'common/fade/fadeTransform'
export default {
    name: 'DetailRecommend',
    components: {
        CommonBook,
        FadeTransform
    },
    props: {
        list: Array
    },
    data () {
        return {
            showBook: false,
            price: '',
            title: ''
        }
    },
    methods: {
        handleBookClick (index) {
            this.showBook = true
            this.title = this.$refs.title[index].innerText
            this.price = this.$refs.price[index].innerText
        },
        handleCloseBook () {
            this.showBook = false
        },
        handleIntrChange () {
            console.log('change')
            this.showDetail = false
        }
    }
}
</script>

<style lang="stylus" scoped>
    .header
        width 100%
        height 1rem
        background-color #eee
        line-height 1rem
        .title
            font-size .36rem
            padding-left .3rem
            .left
                font-size .44rem
                display inline-block
                vertical-align middle
                color red
    .item
        height 0
        padding-bottom 23%
        position relative
        width 100%
        .item-left
            width 70%
            height 0
            padding-bottom 23%
            float left
            .item-title
                padding .5rem .2rem 0
                font-size .3rem
                color #333
            .item-return
                width .9rem
                border .01rem solid #ccc
                color #6699ff
                margin .2rem .2rem 0
        .item-right
            width 30%
            float right
            height 0
            position relative
            padding-bottom 23%
            text-align center
            .item-price
                color #888
                font-size 0
                padding-top .4rem
                .before
                    font-size .2rem
                    color #ff8300
                .price
                    color #ff8300
                    font-size .46rem
                    margin-left 0
            .item-book
                position absolute
                left 50%
                margin-left -.6rem
                width 1.2rem
                height .58rem
                background-color #ff8300
                color #fff
                border-radius .1rem
                line-height .58rem
</style>
